<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>阿福易购-确认订单</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body ontouchstart="">
<div id="orderSection">
<header class="ui-header ui-header-stable af-header">
    <ul class="ui-row-flex">
        <li class="ui-col ui-flex ui-flex-pack-start" ontouchstart="window.location.href='./cart.html'" >
            <i class="ui-icon-return af-icon-home"></i>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-center">
            <h1>确认订单</h1>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-end">

        </li>
    </ul>
</header>
<footer class="ui-footer ui-goods-footer">
    <div class="ui-row-flex">
        <div class="ui-col">
            <button class="J-submitBtn ui-btn ui-btn-default">提交订单</button>
        </div>
    </div>
</footer>
<div class="ui-container">
    <form action="#">
    <section class="ui-my-toolbar af-border-tb af-step">
        <h2 class="J-orderAddress tool-item">
            <span><i class="ui-icon-personal ui-tool-icon" style="color: red;margin-top: -18px;width: 20px;"></i></span>
            <span><span class="J-name">李东</span><span class="J-phone af-step-phone" style="float: right;"><i></i>138****2572</span></span>
            <p class="J-address ui-txt-info" style="margin-top: 4px">郑州市管城区金城街1号楼1单元39号</p>
            <input id="address_id" type="hidden" name="address_id" value="380">
        </h2>
        <b class="af-step-borderT"></b>
        <b class="af-step-borderB"></b>
    </section>

    <section class="ui-my-toolbar af-border-tb af-step">
        <h2  class="tool-item ">
            <span><i class="ui-icon-personal ui-tool-icon" style="color: red;margin-top: -18px;width: 20px;"></i><span style="margin-left: 4px">添加收获地址</span></span>
        </h2>
        <b class="af-step-borderT"></b>
        <b class="af-step-borderB"></b>
    </section>


    <div class="ui-my-order af-border-tb">
        <div class="ui-my-order-header">
            <div class="title">
                免税商品
            </div>
        </div>
        <div class="ui-my-order-content">
            <ul class="ui-list  af-border-tb">
                <li class="ui-border-t">
                    <div class="ui-list-img">
                        <span style="background-image:url(http://afyg.img-cn-qingdao.aliyuncs.com/ab0c1168456bfff2addb445b7fd33dc7.jpg@!70-70)"></span>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">荟食FINEFOOD 饮用天然泉水 350ML</h4>
                        <h4>×3</h4>

                    </div>
                </li>
                <li class="af-border-t">
                    <div class="ui-list-img">
                        <span style="background-image:url(http://afyg.img-cn-qingdao.aliyuncs.com/fd4639bdf08dd2b2248e077212657aab.jpg@!70-70)"></span>
                    </div>
                    <div class="ui-list-info">
                        <h4>可莱丝 LINE抗皱面膜 （黄色）</h4>
                        <h4>×1</h4>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <section class="ui-my-toolbar af-border-tb ui-order-coupon-list">
        <h2 class="tool-item"><span>优惠券</span></h2>
        <ul class="J-couponList ui-list ui-list-text ui-list-radio ui-border-tb" data-type="e_coupon_id">
            <li class="ui-border-t">
                <label class="ui-radio">
                    <input type="radio" name="coupon" value="1" class="cur" checked>
                    满100减60
                </label>
            </li>
            <li class="ui-border-t">
                <label class="ui-radio">
                    <input type="radio" name="coupon" value="2">
                    满200减120
                </label>

            </li>
        </ul>
    </section>

    <section class="ui-my-toolbar af-border-tb  ">
        <h2 class="tool-item af-border-b "><span>  支付方式</span><span style="float: right">在线支付</span></h2>
        <ul class="J-payType ui-list ui-pay-type-list">
            <li data-type="biao">
                <div class="ui-avatar">
                    <span style="background-image:url(/images/biao.png)"></span>
                </div>
                <div class="ui-list-info">
                    <h4 class="ui-nowrap">支付宝</h4>
                    <p class="ui-nowrap">推荐支付宝用户使用</p>
                </div>
                <label class="ui-checkbox-s ui-check-pay-type">
                    <input type="checkbox" name="payType" value="1" checked>
                </label>
            </li>
            <li class="af-border-t" data-type="weixin">
                <div class="ui-avatar">
                    <span style="background-image:url(/images/weixin.jpg)"></span>
                </div>
                <div class="ui-list-info">
                    <h4 class="ui-nowrap">微信支付</h4>
                    <p class="ui-nowrap">推荐已安装微信的用户使用</p>
                </div>
                <label class="ui-checkbox-s ui-check-pay-type">
                    <input type="checkbox" name="payType" value="2">
                </label>
            </li>
            <li class="af-border-t" data-type="pingan">
                <div class="ui-avatar">
                    <span style="background-image:url(/images/pingan.jpg)"></span>
                </div>
                <div class="ui-list-info">
                    <h4 class="ui-nowrap">平安支付</h4>
                    <p class="ui-nowrap">使用您的平安账号进行支付</p>
                </div>
                <label class="ui-checkbox-s ui-check-pay-type">
                    <input type="checkbox" name="payType" value="3">
                </label>
            </li>
        </ul>
    </section>
    <section class="ui-my-toolbar af-border-tb">
        <h2 class="tool-item"><span>  配送信息</span><span style="float: right">xx快递</span></h2>
    </section>

    <section class="ui-my-toolbar ui-border-tb" style="padding-bottom: 40px;">
        <h2 class="tool-item "><span>金额合计</span><span class="J-price order_price" style="float: right">￥108.00</span></h2>
        <h2 class="tool-item"><span>关税</span><span class="J-price tariff_fee" style="float: right">￥0.00</span></h2>
        <h2 class="tool-item "><span>运费</span><span class="J-price shipping_fee" style="float: right">￥0.00</span></h2>
        <h2 class="tool-item "><span>优惠券</span><span class="J-price coupon_price" style="float: right">-￥0.00</span></h2>
        <h2 class="tool-item ui-border-t "><span class="J-price" style="float: right">实付款: <span class="J-price pay_price">￥108.00</span></span></h2>
    </section>

        <!--
金额合计： ￥1076.00
关税： ￥0.00
运费： ￥0.00
优惠券： -￥0.00
限时折扣： -￥0.00
应付金额： ￥1076.00-->
    </form>
</div>
</div>

<!--地址弹出框-->
<section id="addressCover" class="ui-cover-wrap" data-id="1234">
    <ul class="ui-cover-scroll ui-cover-ths">
        <li class="J-mask ui-cover-mask"></li>
        <li class="J-listWrap ui-cover" data-id="123">
            <div class="ui-header ui-header-stable af-header">
                <ul class="ui-row-flex">
                    <li class="ui-col ui-flex ui-flex-pack-start">
                        <i class="ui-icon-return"></i>
                    </li>
                    <li class="ui-col ui-flex ui-flex-pack-center">
                        <h1>收货地址</h1>
                    </li>
                    <li class="ui-col ui-flex ui-flex-pack-end">
                    </li>
                </ul>
            </div>
            <div class="ui-container">

                <ul class="J-list ui-address-card">
                    <li class="ui-border-tb" data-id="1">
                        <h3>
                            <span class="J-item name" data-name="consignee" data-val="李东">李东</span>
                            <span class="J-item phone" data-name="mobile" data-val="13811112572">13811112572</span>
                        </h3>
                        <div class="address">
                            <span class="J-item" data-name="province" data-val="河南省">河北省</span>
                            <span class="J-item" data-name="city" data-val="郑州市">郑州市</span>
                            <span class="J-item" data-name="district" data-val="中原区">中原区</span>
                            <span class="J-item" data-name="address" data-val="金城街紫藤苑5号楼5单元50号">金城街紫藤苑5号楼5单元50号</span>
                            <span class="J-item af-hide" data-name="country" data-val="中国"></span>
                            <span class="J-item af-hide" data-name="position_ids" data-val="410000,410100,410102"></span>
                            <span class="J-item af-hide" data-name="id_card" data-val="410726198712220410"></span>
                            <span class="J-item af-hide" data-name="is_default" data-val="1"></span>
                        </div>
                        <div class=" tool  ui-border-t">
                            <span class="select">
                               <label class="ui-radio">
                                   <input type="radio" checked name="radio">
                                   选择
                               </label>
                            </span>
                            <span class="op ui-tiled">
                                <label class="J-edit"><i class="ui-icon-order"></i>编辑</label>
                                <label class="J-del"><i class="ui-icon-delete"></i>删除</label>
                            </span>
                        </div>
                    </li>
                    <li class="ui-border-tb" data-id="2">
                        <h3>
                            <span class="J-item name" data-name="consignee" data-val="申长伟">申长伟</span>
                            <span class="J-item phone" data-name="mobile" data-val="18703644856">18703644856</span>
                        </h3>
                        <div class="address">
                            <span class="J-item" data-name="province" data-val="河南省">河北省</span>
                            <span class="J-item" data-name="city" data-val="郑州市">郑州市</span>
                            <span class="J-item" data-name="district" data-val="中原区">中原区</span>
                            <span class="J-item" data-name="address" data-val="中晟银泰">中晟银泰</span>
                            <span class="J-item af-hide" data-name="country" data-val="中国"></span>
                            <span class="J-item af-hide" data-name="position_ids" data-val="410000,410100,410102"></span>
                            <span class="J-item af-hide" data-name="id_card" data-val="410726198712220410"></span>
                            <span class="J-item af-hide" data-name="is_default" data-val="0"></span>
                        </div>
                        <div class=" tool  ui-border-t">
                            <span class="select">
                               <label class="ui-radio">
                                   <input type="radio" name="radio">
                                   选择
                               </label>
                            </span>
                            <span class="op ui-tiled">
                                <label class="J-edit"><i class="ui-icon-order"></i>编辑</label>
                                <label class="J-del"><i class="ui-icon-delete"></i>删除</label>
                            </span>
                        </div>
                    </li>
                </ul>

            </div>
            <div class="ui-footer af-footer">
                <div class="ui-btn-wrap" style="margin-top: -10px;">
                    <button class="J-add ui-btn-lg ui-btn-danger">
                        新建收货地址
                    </button>
                </div>
            </div>
        </li>
        <li class="J-formWrap ui-cover">
            <div class="ui-header ui-header-stable af-header">
                <ul class="ui-row-flex">
                    <li class="ui-col ui-flex ui-flex-pack-start">
                        <i class="ui-icon-return"></i>
                    </li>
                    <li class="ui-col ui-flex ui-flex-pack-center">
                        <h1>收货地址</h1>
                    </li>
                    <li class="ui-col ui-flex ui-flex-pack-end">
                    </li>
                </ul>
            </div>
            <div class="ui-container">
                <div class="ui-form">
                    <form class="J-form" action="#">
                        <div class="ui-form-item ui-border-b">
                            <label for="areaInput">
                                所在地区
                            </label>
                            <input id="areaInput" type="text" placeholder="请选择所在地区" required readonly/>
                            <input id="areaIds" type="hidden" name="position_ids" value=""/>
                            <input type="hidden" name="country" value="中国"/>
                            <input type="hidden" name="province" value=""/>
                            <input type="hidden" name="city" value=""/>
                            <input type="hidden" name="district" value=""/>
                        </div>
                        <div class="ui-form-item ui-form-item-textarea ui-border-b">
                            <label for="address">
                                详细地址
                            </label>
                            <textarea id="address" name="address" placeholder="无需重复填写省市区，小于75个字" data-reg-msg="请输入详细地址" maxlength="75" required></textarea>
                        </div>
                        <div class="ui-form-item ui-border-b">
                            <label for="consignee">
                                收获人姓名
                            </label>
                            <input id="consignee" type="text" name="consignee" placeholder="请输入收货人姓名" required>
                            <a href="#" class="ui-icon-close af-hide"></a>
                        </div>
                        <div class="ui-form-item ui-border-b">
                            <label for="id_card">
                                身份证号码
                            </label>
                            <input id="id_card" type="text" name="id_card" placeholder="18位身份证号码" data-reg="(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$)" required>
                            <a href="#" class="ui-icon-close af-hide"></a>
                        </div>
                        <div class="ui-form-item ui-border-b">
                            <label for="mobile">
                                手机号码
                            </label>
                            <input id="mobile" type="text" name="mobile" placeholder="请输入手机号码" data-reg="^1[3|4|5|7|8]\d{9}$" required>
                            <a href="#" class="ui-icon-close af-hide"></a>
                        </div>
                        <div class="ui-form-item ui-form-item-switch ui-border-b">
                            <p>
                                设为默认地址
                            </p>
                            <label class="ui-switch">
                                <input type="checkbox" name="is_default" value="1">
                            </label>
                        </div>
                    </form>
                </div>
            </div>

            <div class="ui-footer af-footer">
                <div class="ui-btn-wrap" style="margin-top: -10px;">
                    <button class="J-submit ui-btn-lg ui-btn-danger" >
                        确定
                    </button>
                </div>
            </div>
        </li>
    </ul>
</section>

<script id="addressTpl" type="text/html">
    <li class="ui-border-tb" data-id="${id}">
        <h3>
            <span class="J-item name" data-name="consignee" data-val="${consignee}">${consignee}</span>
            <span class="J-item phone" data-name="mobile" data-val="${mobile}">${mobile}</span>
        </h3>
        <div class="address">
            <span class="J-item" data-name="province" data-val="${province}">${province}</span>
            <span class="J-item" data-name="city" data-val="${city}">${city}</span>
            <span class="J-item" data-name="district" data-val="${district}">${district}</span>
            <span class="J-item" data-name="address" data-val="${address}">${address}</span>
            <span class="J-item af-hide" data-name="position_ids" data-val="${position_ids}"></span>
            <span class="J-item af-hide" data-name="id_card" data-val="${id_card}"></span>
            <span class="J-item af-hide" data-name="is_default" data-val="${is_default}"></span>
        </div>
        <div class=" tool  ui-border-t">
            <span class="select">
               <label class="ui-radio">
                   <input type="radio" checked name="radio">
                   选择
               </label>
            </span>
            <span class="op ui-tiled">
                <label class="J-edit"><i class="ui-icon-order"></i>编辑</label>
                <label class="J-del"><i class="ui-icon-delete"></i>删除</label>
            </span>
        </div>
    </li>
</script>
<!--省市区联动-->
<link rel="stylesheet" href="/js/LArea/LArea.min.css">
<script src="/js/LArea/LAreaData1.js"></script>
<script src="/js/LArea/LArea.min.js"></script>

<script src="/lib/zepto.min.js"></script>
<script src="/js/frozen.js"></script>
<script src="/js/app.min.js"></script>


<script>
    $(function () {
        var config={
            ajaxInfo:'/order',//获取订单价格
            makeOrder:'/order',//获取订单价格
            orderDetail:'/order',//去订单详情页
            biao:'',//支付宝支付路径
            weixin:'',//微信支付
            pingan:'',//平安支付
            addUrl:'/my/address',//添加地址
            editUrl:'/my/address',//修改地址
            delUrl:'/my/address'//删除地址
        };
        new MakeOrder(config);
    });
</script>
</body>
</html>